import { ProTable, type ProColumns } from '@/components/Pro';

import { pcsControllerGetPcsPageEvents } from '@/services/ess/devicePcs';
import { useModel } from '@@/exports';
import dayjs from 'dayjs';
import React from 'react';
import { useIntl } from 'umi';

const EventsInfo: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const intl = useIntl();

  const columns: ProColumns<any>[] = [
    {
      title: intl.formatMessage({ id: 'data.s/N' }),
      dataIndex: 'pageIndex',
      hideInSearch: true,
      width: 50,
      fixed: 'left',
    },
    {
      title: intl.formatMessage({ id: 'data.acquisitionTime' }),
      dataIndex: 'collectTime',
      key: 'collectTime',
      valueType: 'dateTimeRange',
      fixed: 'left',
      initialValue: [dayjs().startOf('day'), dayjs()],
      width: 100,
      render: (_, record) => {
        return <span>{record.collectTime}</span>;
      },
    },
    {
      title: intl.formatMessage({ id: 'data.reportingTime' }),
      dataIndex: 'reportTime',
      key: 'reportTime',
      valueType: 'dateTimeRange',
      fixed: 'left',
      initialValue: [dayjs().startOf('day'), dayjs()],
      width: 100,
      render: (_, record) => {
        return <span>{record.reportTime}</span>;
      },
    },
    {
      title: intl.formatMessage({ id: 'alarmManagement.alarmList.deviceType' }),
      dataIndex: 'product',
      key: 'product',
      hideInSearch: true,
      width: 100,
    },
    {
      title: intl.formatMessage({ id: 'data.deviceFactory' }),
      dataIndex: 'producer',
      key: 'producer',
      hideInSearch: true,
      width: 100,
    },
    {
      title: intl.formatMessage({ id: 'data.deviceID' }),
      dataIndex: 'devNum',
      hideInSearch: true,
      width: 90,
    },
    {
      title: intl.formatMessage({ id: 'pcsMonitoring.eventStatus' }),
      dataIndex: 'code',
      hideInSearch: true,
      width: 100,
    },
    {
      title: intl.formatMessage({ id: 'alarmManagement.alarmList.Eventstatus' }),
      dataIndex: 'state',
      hideInSearch: true,
      width: 100,
      render: (_, record) => {
        return (
          <span>
            {record.state === 1
              ? intl.formatMessage({ id: 'alarmManagement.alarmList.Occurring' })
              : intl.formatMessage({ id: 'alarmManagement.alarmList.Disappeared' })}
          </span>
        );
      },
    },
    {
      title: intl.formatMessage({ id: 'alarmManagement.alarmList.eventData' }),
      dataIndex: 'event',
      hideInSearch: true,
      width: 100,
    },
  ];
  const scroll = {
    x: 'max-content',
  };
  return (
    <div style={{ width: '100' }}>
      <ProTable
        rowKey={'pageIndex'}
        columns={columns}
        scroll={scroll}
        request={async (values) => {
          const params = {
            current: values.current,
            pageSize: values.pageSize,
            stationId: initialState?.stationId,
            collectStartTime: values.collectTime ? values.collectTime[0] : undefined,
            collectEndTime: values.collectTime ? values.collectTime[1] : undefined,
            reportStartTime: values.reportTime ? values.reportTime[0] : undefined,
            reportEndTime: values.reportTime ? values.reportTime[1] : undefined,
          };
          return await pcsControllerGetPcsPageEvents(params);
        }}
        toolBarRender={() => []}
        customToolBarClass="global-tabs-custom-tools"
      ></ProTable>
    </div>
  );
};

export default EventsInfo;
